<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            background-image: url("imgs/e.jpg");
            background-size: cover; /*cover是专门用来设置全屏背景的*/
            background-color: #66b1ff;
            margin: 0;
            text-align: center;
        }

        .el-form-item__label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: white;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card style="width: 800px;height: 700px;margin: 100px auto;background-color: rgba(100,100,100,0.5);color:white;">
        <h1>注册页面</h1>
        <el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px"
                 class="demo-user" style="width: 500px; margin: 0 auto">
            <el-form-item label="用户名:" prop="username">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
                <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item label="部门编号:" prop="departmentId">
                <el-input v-model="user.departmentId"></el-input>
            </el-form-item>

            <el-form-item label="性别:">
                <el-col :span="12">
                    <input type="radio" v-model="user.gender" value="男">男
                    <input type="radio" v-model="user.gender" value="女">女
                </el-col>
                <el-col :span="12">
                    <el-select v-model="user.origo" placeholder="请选择籍贯">
                        <el-option v-for="item in origo1" :key="item.value" :label="item.label"
                                   :value="item.label">
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="出生日期:">
                    <el-input type="text" v-model="user.birthdate" placeholder="请输入出生日期"></el-input>
            </el-form-item>
            <el-form-item label="身份证号:">
                <el-input type="text" v-model="user.cardId" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPass">
                <el-input type="password" v-model="user.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="resetForm('user')">清空</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',

        data: function () {
            var checkphone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                }
                callback()
            };
            var checkdepartmentId = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('部门编号不能为空'));
                }
                callback()
            };
            var validateusername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }
                callback()
            };

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.user.checkPass !== '') {
                        this.$refs.user.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.user.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                user: {
                    username: "",
                    password: '',
                    phone: '',
                    departmentId: '',
                    time:"",
                    birthdate:"",
                    cardId:"",
                    gender: '男',
                    origo: "",
                    typeId:""
                },
                checkPass: '',
                origo1: [{value: '选项1', label: '北京'}, {value: '选项2', label: '上海'},
                    {value: '选项3', label: '武汉'}, {value: '选项4', label: '长沙'},
                    {value: '选项5', label: '深圳'}],
                rules: {
                    username: [
                        {validator: validateusername, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    phone: [
                        {validator: checkphone, trigger: 'blur'}
                    ],
                    departmentId: [
                        {validator: checkdepartmentId, trigger: 'blur'}
                    ],
                },

            }
        },
        methods: {
            submitForm() {
                axios.post("/reg", v.user).then(function (response) {
                    if (response.data == 2) {
                        alert("注册成功")
                        location.href="/login.html";
                    } else if (response.data==1) {
                        alert("用户名已存在,请重试")
                        location.reload();
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },


        }
    })
</script>
</html>